<template>
    <h2>会员信息显示页面</h2>
    会员名称<input type="text" v-model="name" />
    会员手机号<input type="text" v-model="phone"/>
    <input type="button" value="查询" @click="SelectData" />
    <input type="button" value="添加" @click="addInfo" />
    <input type="button" value="导出" @click="ExportFile" />
    <table border="1">
        <thead>
            <tr>
            <td>会员头像</td>     
            <td>会员名称</td>
            <td>会员账号</td>
            <td>会员手机号</td>
            <td>剩余金额</td>
            <td>会员积分</td>
            <td>操作</td>  
        </tr>    
        </thead>
        <tbody>
            <tr v-for="item in info">
            <td>
                <img style="width:70px;height:70px" :src="item.MI_Img"/>
            </td>     
            <td>{{item.MI_Name}}</td>
            <td>{{item.MI_Code}}</td>
            <td>{{item.MI_Phone}}</td>
            <td>{{item.MI_Price}}</td>
            <td>{{item.MI_Score}}</td>
            <td>
                <input type="button" value="详情" @click="backInfo(item.MI_Id)" />
                <input type="button" value="修改积分" @click="changeScore(item.MI_Id)" />
                <input type="button" value="充值" @click="changePrice(item.MI_Id)" />
            </td>  
        </tr>    
        </tbody>
    </table>
    共{{ page.count }}条数据，每页{{ page.size }}条数据,第{{ page.index }}/{{ page.pcount }}页
    <a href="#" style="margin-right: 10px;" @click="pageChange('F')">首页</a>
    <a href="#" style="margin-right: 10px;" @click="pageChange('P')">上一页</a>
    <a href="#" style="margin-right: 10px;" @click="pageChange('N')">下一页</a>
    <a href="#" style="margin-right: 10px;" @click="pageChange('E')">尾页</a>
    <select v-model="csize" @change="ChangeSize">
        <option value="1">每页1条</option>
        <option value="2">每页2条</option>
        <option value="3">每页3条</option>
    </select>
    <input type="text" v-model="nindex" style="width:30px"/>
    <input type="button" value="跳转" @click="jump"/>
</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter();
    import axios from 'axios'
    import { useMemberStore } from '../../store';
    const useStore=useMemberStore();
    const ExportFile=()=>{
        axios.get('https://localhost:7292/api/Member/ExportFile',{
            params:{
                filePath:"C:\\Users\\23285\\Desktop\\ExportFile\\Month.xlsx"
            }
        })
        .then(res=>{
            if(res.data>0)
            {
                alert('导出成功');
            }
            else
            {
                alert('导出失败');
            }
        })
    }

    const pageChange=(mes:string)=>{
        switch(mes)
        {
            case 'F':page.value.index=1;break;
            case 'P':
                if(page.value.index>1)
                {
                    page.value.index--;
                }
                else
                {
                    alert('已经是第一页了');
                }
                break;
            case 'N':
                if(page.value.index<page.value.pcount)
                {
                    page.value.index++;
                }
                else
                {
                    alert('已经是最后一页了');
                }
                break;
            case 'E':page.value.index=page.value.pcount;break;
        }
        loadData();
    }
    const csize=ref(2);
    const ChangeSize=()=>{
        page.value.size=csize.value;
        page.value.index=1;
        loadData();
    }
    const nindex=ref("");
    const jump=()=>{
        if(nindex.value=="")
        {
            alert('页码不能为空');
            return;
        }
        if(isNaN(Number(nindex.value)))
        {
            alert('请输入数字');
            return;
        }
        if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
        {
            page.value.index=Number(nindex.value);
            loadData();
        }
        else
        {
            alert('请输入有效页码');
            return;
        }
    }

    const backInfo=(mid:number)=>{
        router.push('/backInfo');
        useStore.mid=mid;
    }
    const changeScore=(mid:number)=>{
        router.push('/changeScore');
        useStore.mid=mid;
    }
    const changePrice=(mid:number)=>{
        router.push('/changePrice');
        useStore.mid=mid;
    }

    const info=ref( [{
      "MI_Id": 1,
      "MI_Name": "",
      "MI_Code": "",
      "MI_Phone": "",
      "MI_Price": null,
      "MI_Score": null,
      "MI_ScoreRemark": "",
      "MI_Img": "",
      "MI_Sex": true,
      "MI_BirthDay": "",
      "MI_PayMethod": "",
      "MI_PayRemark": ""
    }])
    const page=ref({
        count:0,
        pcount:0,
        index:1,
        size:2
    })
    const name=ref("");
    const phone=ref("");
    onMounted(()=>{
       loadData();
    })
    const loadData=()=>{
        axios.get('https://localhost:7292/api/Member/InfoShow',{
            params:{
                index:page.value.index,
                size:page.value.size,
                name:name.value,
                phone:phone.value
            }
        })
        .then(res=>{
            info.value=res.data.pageList;
            page.value.count=res.data.count;
            page.value.pcount=res.data.pcount;
        })
    }
    const SelectData=()=>{
        page.value.index=1;
        loadData();
    }
    const addInfo=()=>{
        router.push('/addInfo');
    }
</script>